import React, { useMemo } from 'react'
import { ADD_CART, REDUCE_CART } from 'src/redux/action-type'
import { useSelector, useDispatch } from 'react-redux'
import { CSSTransition } from 'react-transition-group';
import './index.scss'

const BuyCart = (props) => {
    const {
        foods,
        shopId,
        onShowMoveDot,
        onShowChooseList,
        onShowReduceTip
    } = props;
    const { cartList } = useSelector(state => state);
    const dispatch = useDispatch()

    //shopCart变化的时候重新计算当前商品的数量
    const foodNum = useMemo(() => {
        let category_id = foods.category_id;
        let item_id = foods.item_id;
        let shopCart = { ...cartList[shopId] };
        if (shopCart[category_id] && shopCart[category_id][item_id]) {
            let num = 0;
            Object.values(shopCart[category_id][item_id]).forEach((item, index) => {
                num += item.num;
            })
            return num;
        } else {
            return 0;
        }
    }, [cartList, shopId, foods])

    //移出购物车
    const removeOutCart = (category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock) => {
        if (foodNum > 0) {
            dispatch({
                type: REDUCE_CART,
                shopid: shopId,
                category_id,
                item_id,
                food_id,
                name,
                price,
                specs,
                packing_fee,
                sku_id,
                stock
            })
        }
    }

    //加入购物车，计算按钮位置。
    const addToCart = (category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, e) => {

        dispatch({
            type: ADD_CART,
            shopid: shopId,
            category_id,
            item_id, food_id,
            name,
            price,
            specs,
            packing_fee,
            sku_id,
            stock
        })

        let elLeft = e.target.getBoundingClientRect().left;
        let elBottom = e.target.getBoundingClientRect().bottom;
        onShowMoveDot([true], elLeft, elBottom)
    }

    //显示规格列表
    const showChooseList = (foodScroll) => {
        onShowChooseList(foodScroll)
    }
    //点击多规格商品的减按钮，弹出提示
    const showReduceTip = () => {
        onShowReduceTip()
    }

    return <section className="cart_module">
        {
            foods.specifications.length > 0 ? <section className="cart_button">
                <CSSTransition classNames="showReduce" in={foodNum > 0} timeout={500} unmountOnExit>
                    <span
                        onClick={() => {
                            removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)
                        }}>
                        <svg>
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-minus"></use>
                        </svg>
                    </span>
                </CSSTransition>
                <CSSTransition classNames="fade" in={foodNum > 0} timeout={500} unmountOnExit>
                    <span className="cart_num" >{foodNum}</span>
                </CSSTransition>
                <span
                    onClick={(e) => {
                        addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, e)
                    }}
                >
                    <svg className="add_icon" >
                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-add"></use>
                    </svg>
                </span>

            </section> : <section className="choose_specification">
                <section className="choose_icon_container">
                    <CSSTransition classNames="showReduce" in={foodNum > 0} timeout={500} unmountOnExit>
                        <svg className="specs_reduce_icon" onClick={showReduceTip}>
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#cart-minus"></use>
                        </svg>
                    </CSSTransition>
                    <CSSTransition classNames="fade" in={foodNum > 0} timeout={500} unmountOnExit>
                        <span className="cart_num">{foodNum}</span>
                    </CSSTransition>
                    <span className="show_chooselist" onClick={() => { showChooseList(foods) }}>选规格</span>
                </section>
            </section>
        }
    </section>
}

export default BuyCart